<template>
  <div>
    <div class="card">
      <div class="header">
        <div class="title">
          销售数据<span class="sub-title">2022.10.31~2022.11.01</span>
        </div>
        <div class="week-month-year">
          <div
            v-for="(item, index) in ['周', '月', '年']"
            :key="index"
            class="item"
            :class="{ active: active === index }"
            @click="toggleFn(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="mian">
        <div ref="left" class="left" />
        <div ref="right" class="right">22</div>
      </div>
    </div>
  </div>
</template>

<script>
import { amountCollect, regionCollect } from '@/api/home'
import { getFirstDayOfWeek, parseTime } from '@/utils/getTime'
export default {
  data() {
    return {
      active: 0,
      dataList: {}, // 折线图数据
      dataRight: {} // 柱状图数据
    }
  },
  created() {
    this.weekDay()
    this.regionCollect()
  },
  methods: {
    // 获取星期的转换--把之前日期转换成星期只是一个数据--需要转换成文字
    getWeekDay(val) {
      const week = [
        '星期天',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      return week[val]
    },
    // 获取折线图数据
    async weekDay() {
      const { data } = await amountCollect({
        start: parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d}'),
        end: parseTime(new Date(), '{y}-{m}-{d}')
      })
      this.dataList = data
      this.dataList.series = this.dataList.series.map((item) => item / 100)
      this.dataList.xAxis = this.dataList.xAxis.map((item) =>
        this.getWeekDay(new Date(item).getDay())
      )
      // 更新dom节点并且把数据渲染上去
      this.echartLeft()
    },
    // 获取柱状图数据
    async regionCollect() {
      const { data } = await regionCollect({
        start: parseTime(getFirstDayOfWeek(new Date()), '{y}-{m}-{d}'),
        end: parseTime(new Date(), '{y}-{m}-{d}')
      })
      this.dataRight = data
      this.dataRight.series = this.dataRight.series.map(item => item / 100)
      this.echartsRight()
    },
    // 1.点击动态切换类名
    async toggleFn(index) {
      this.active = index
      if (index === 0) {
        this.weekDay()
      }
    },
    // 2.折线图
    echartLeft() {
      const echartLeft = this.$echarts.init(this.$refs.left)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '15%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dataList.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位:  元'
        },
        series: [
          {
            data: this.dataList.series,
            type: 'line',
            lineStyle: {
              color: 'red'
            },
            areaStyle: {
              opacity: 0.5
            }
          }
        ],
        title: [
          {
            left: 'center',
            text: '销售额趋势图'
          }
        ]
      }
      echartLeft.setOption(option)
    },
    // 柱状图
    echartsRight() {
      const echartRight = this.$echarts.init(this.$refs.right)
      const option = {
        color: 'rgb(145 176 255)', // 给柱状图设置颜色
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '15%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          data: this.dataRight.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位:  元'
        },
        series: [
          {
            data: this.dataRight.series,
            type: 'bar',
            barWidth: '10%' // 设置柱状图的柱状的宽度
          }
        ]
      }
      echartRight.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: 0 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
  min-height: 322px;
  .header {
    display: flex;
  }
  .title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    .sub-title {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
    }
  }
  .week-month-year {
    display: flex;
    width: 129px;
    height: 34px;
    line-height: 34px;
    background: rgba(233, 243, 255, 0.37);
    border-radius: 10px;
    .item {
      margin-left: 12px;
      width: 37px;
      height: 25px;
      font-size: 14px;
      color: #9ca3b4;
      cursor: pointer;
    }
    .active {
      background: #fff;
      -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      border-radius: 7px;
      font-weight: 600;
      color: #333;
    }
  }
  .mian {
    display: flex;
    .left {
      padding: 10px;
      width: 400px;
      height: 260px;
    }
    .right {
      padding: 10px;
      width: 400px;
      height: 260px;
    }
  }
}
</style>
